import Axis from './axis'
import {
  uuid
} from 'vue-uuid';
import '@/assets/Animation/Animation.css'
import '@/assets/Animation/lighter.css'

export default class Style {
  constructor(viewer) {
    this.viewer = viewer
    this.entities = viewer.entities
    this.axis = new Axis(viewer)

    this._init()
    this.addEntity();
  }

  _guid() {
    return uuid.v1();
  }

  _init() {
    // let clockViewModel = new Cesium.ClockViewModel(this.viewer.cesiumWidget.clock);
    // let viewModel = new Cesium.AnimationViewModel(clockViewModel);
    // let widget = new Cesium.Animation('animationContainer', viewModel);
    // document.body.className = 'cesium-lighter';
    // widget.applyThemeChanges();

    // const tick = () => {
    //   this.viewer.clock.tick();
    //   Cesium.requestAnimationFrame(tick);
    // }
    // Cesium.requestAnimationFrame(tick);

    let frame = this.viewer.infoBox.frame;
    frame.addEventListener('load', () => {
      let cssLink = frame.contentDocument.createElement('link')
      cssLink.href = Cesium.buildModuleUrl('css/cesium.css');
      cssLink.rel = 'stylesheet';
      cssLink.type = 'text/css';
      frame.contentDocument.head.appendChild(cssLink);
    }, false);
  }

  addEntity() {
    let entity = this.entities.add({
      name: '模型',
      id: this._guid(),
      position: this.axis.lonlatToWorld(118.802891, 31.9773),
      model: {
        uri: "glb/aircraft.glb",
        minimumPixelSize: 500,
        maximumScale: 20000,
      },  
      scale: 100,
      disableDepthTestDistance: 99000000,
      description: '<div class="infobox-body"><h2>秦时明月之万里长城</h2><img src="img/flower.jpeg"/></div>'
    })

    this.viewer.trackedEntity = entity
  }
}